<template>
  <div class="app-container">
    <lemon-e-table ref="carTable" :list-method="listMethod" :delete-single-method="deleteSingleMethod"
                   :delete-all-method="deleteAllMethod"
                   :table-columns="tableColumns" :table-search-form-param="tableSearchFormParam"
                   @addData="addData" @editData="editData"></lemon-e-table>

    <el-dialog :title="actionType=='add'?'添加拖车信息':'修改拖车信息'" :visible.sync="dialogCarFormVisible" top="10vh">
      <el-form ref="form" :model="carData" label-width="80px">
        <el-form-item label="救援公司">
          <el-select v-model="carData.rescueCompanyId" placeholder="请选择" style="width:200px" filterable>
            <el-option
              v-for="item in rescueCompanys"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码">
          <el-select v-model="carData.rescueCarNum.carRegionVal" placeholder="请选择" style="width:100px" filterable>
            <el-option
              v-for="item in carRegion"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
          <el-select v-model="carData.rescueCarNum.carCodeVal" placeholder="请选择" style="width:100px" filterable>
            <el-option
              v-for="item in carCode"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
          <el-input v-model="carData.rescueCarNum.carNumVal" placeholder="请输入内容" style="width:200px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCarFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd" v-if="actionType=='add'">保存</el-button>
        <el-button type="primary" @click="handleEdit" v-else>修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss">

</style>

<script>
  import LemonETable from '@/lemonecomponent/LemonETable'
  import LemonEDialogForm from '@/lemonecomponent/LemonEForm/LemonEDialogForm'
  import operationRescueCarApi from '@/api/operationRescueCarApi'
  import rescueCompanyApi from '@/api/rescueCompanyApi'


  export default {
    name: 'rescueCar',
    components: {LemonETable, LemonEDialogForm},
    created() {
      this.listTableData()
    },
    data() {
      return {
        carId: '',
        carData: {
          rescueCompanyId: '',
          rescueCompanys: [],
          rescueCarNum: {
            carRegionVal: '',
            carCodeVal: '',
            carNumVal: ''
          }
        },


        actionType: 'add',
        dialogCarFormVisible: false,
        timer: null,
        listMethod: operationRescueCarApi.list,
        addMethod: operationRescueCarApi.add,
        getMethod: operationRescueCarApi.get,
        updateMethod: operationRescueCarApi.update,
        deleteSingleMethod: operationRescueCarApi.deleteSingle,
        deleteAllMethod: operationRescueCarApi.remove,
        carRegion: [
          '京',
          '津',
          '晋',
          '冀',
          '蒙',
          '辽',
          '吉',
          '黑',
          '沪',
          '苏',
          '浙',
          '皖',
          '闽',
          '赣',
          '鲁',
          '豫',
          '鄂',
          '湘',
          '粤',
          '桂',
          '琼',
          '渝',
          '川',
          '贵',
          '云',
          '藏',
          '陕',
          '甘',
          '青',
          '宁',
          '新'
        ],
        carCode: [
          'A',
          'B',
          'C',
          'D',
          'E',
          'F',
          'G',
          'H',
          'J',
          'K',
          'L',
          'M',
          'N',
          'P',
          'Q',
          'R',
          'S',
          'T',
          'U',
          'V',
          'W',
          'X',
          'Y'
        ],

        //搜索表单
        tableSearchFormParam: {
          formAttr: {
            labelWidth: '70',

            items: [
              {
                code: 'rescueCompanyId',
                name: '所属公司',
                type: 'select',
                selectListMethod: rescueCompanyApi.listAllRescueCompany,
                value: ''
              },
              {
                code: 'rescueCarNum',
                name: '车牌号',
                type: 'input',
                inputType: 'text',
                value: ''
              }
            ]
          },
          cols: 3
        },
        //表格项
        tableColumns: [
          {
            label: '救援公司',
            name: 'companyName'
          },
          {
            label: '车牌号',
            name: 'rescueCarNum'
          }
        ],
        tableOperation: []
      }
    },
    methods: {
      listTableData() {
        this.timer = setTimeout(() => {
          this.$refs.carTable.listTableData()
        }, 100)
      },
      addData() {
        rescueCompanyApi.listAllRescueCompany({}, (res) => {
          this.rescueCompanys = res
          this.carData = {
            rescueCarNum:{
              carRegionVal: '',
              carCodeVal: '',
              carNumVal: ''
            }
          }
//          let carData = {
//
//          }
          //this.carData.rescueCarNum = carData
          this.dialogCarFormVisible = true
          this.actionType = 'add'
        }, () => {
        })
      },
      handleAdd() {
        operationRescueCarApi.add(this.carData, (res) => {
          if(res.message){
            this.$message({
              message:res.message,
              type: 'error'
            })
          }else{
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.listTableData()
            this.dialogCarFormVisible = false;
          }
        }, () => {
        })
      },
      editData(row) {
        rescueCompanyApi.listAllRescueCompany({}, (res) => {
          this.carData = {}
          this.rescueCompanys = res
          this.carId = row.id
          let carData = {
            carRegionVal: '',
            carCodeVal: '',
            carNumVal: ''
          }
          this.carData.rescueCarNum = carData
          this.actionType = 'edit'
          operationRescueCarApi.get(row.id, (res) => {
            this.carData = res
            this.dialogCarFormVisible = true
          }, () => {
          })
        }, () => {
        })
      },
      handleEdit() {
        operationRescueCarApi.update(this.carId, this.carData, (res) => {
          if(res.message){
            this.$message({
              message:res.message,
              type: 'error'
            })
          }else{
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.listTableData()
            this.dialogCarFormVisible = false
          }
        }, () => {
        })
      }
    }
  }
</script>
